<script lang="ts" setup>
import { useVbenDrawer } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter';
import { saveProjectMemberApi } from '#/api/project/member';
import type { ProjectMemberApi } from '#/api/project/member';
import { $t } from '#/locales';

const props = defineProps<{
  onSave: () => void;
  roleOptions: { label: string; value: string }[];
  sexOptions: { label: string; value: string }[];
}>();

defineOptions({
  name: 'MemberDrawer',
});

const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  handleSubmit: onSubmit,
  schema: [
    {
      component: 'Input',
      componentProps: {
        type: 'hidden',
      },
      fieldName: 'id',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: $t('member.form.name.placeholder'),
      },
      fieldName: 'name',
      label: $t('member.name'),
      rules: 'required',
    },
    {
      component: 'Select',
      componentProps: () => ({
        placeholder: $t('member.form.role.placeholder'),
        options: props.roleOptions,
        allowClear: true,
      }),
      fieldName: 'role',
      label: $t('member.role'),
      rules: 'required',
    },
    {
      component: 'Select',
      componentProps: () => ({
        placeholder: $t('member.form.sex.placeholder'),
        options: props.sexOptions,
        allowClear: true,
      }),
      fieldName: 'sex',
      label: $t('member.sex'),
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: $t('member.form.phone.placeholder'),
        type: 'number',
      },
      fieldName: 'phone',
      label: $t('member.phone'),
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: $t('member.form.email.placeholder'),
      },
      fieldName: 'email',
      label: $t('member.email'),
    },
  ],
  showDefaultActions: false,
});

async function onSubmit(values: Record<string, any>) {
  const data = values as ProjectMemberApi.SaveParams;
  try {
    await saveProjectMemberApi(data);
  } catch (error: any) {
    console.error('保存失败:', error);
    throw new Error(error.message || '提交失败');
  }
}

const [Drawer, drawerApi] = useVbenDrawer({
  onCancel() {
    drawerApi.close();
  },
  onConfirm: async () => {
    const isValid = await formApi.validate();
    if (isValid.valid) {
      try {
        const values = formApi.form.values;
        await formApi.submitForm();
        drawerApi.close();
        message.success(values.id ? '编辑成功' : '新增成功');
        props.onSave();
      } catch (error: any) {
        console.error('提交失败:', error);
        message.error(error.message || '提交失败');
      }
    } else {
      message.error('请填写必填项');
    }
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const values = drawerApi.getData<Record<string, any>>();
      if (values) {
        formApi.setValues(values);
      }
    } else {
      formApi.setValues({});
    }
  },
});
</script>

<template>
  <Drawer :title="formApi.form.values?.id ? $t('common.action.edit') + $t('member.title') : $t('common.action.add') + $t('member.title')">
    <Form />
  </Drawer>
</template>
